import React, { memo, useEffect } from 'react'
import {
  RecommendTopListWrapper,
  ContentWrapper
} from './style'
import {
  getFastTopListDataAction,
  getNewTopListDataAction,
  getOrginTopListDataAction
} from '../../store/actionCreator'
import RecommendNav from '@/components/recommend-nav'
import RankList from '@/components/rank-list'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
export default memo(function RecommendTopList() {
  const dispatch = useDispatch()
  const { fastTopList, newTopList, orginTopList } = useSelector(state => ({
    fastTopList: state.getIn(['recommend', 'fastTopList']),
    newTopList: state.getIn(['recommend', 'newTopList']),
    orginTopList:state.getIn(['recommend','orginTopList'])
  }),shallowEqual)
  useEffect(() => {
    dispatch(getFastTopListDataAction())
    dispatch(getNewTopListDataAction())
    dispatch(getOrginTopListDataAction())
  },[dispatch])
  return (
    <RecommendTopListWrapper>
      <RecommendNav title="榜单" arr={[]} />
      <ContentWrapper className="recommend-top-bg">
        <RankList info={ fastTopList}/>
        <RankList info={ newTopList}/>
        <RankList info={orginTopList }/> 
      </ContentWrapper>
    </RecommendTopListWrapper>
  )
})
